<template>
  <div class="app">
    <!-- <van-nav-bar title="分类" /> -->
    <MyNavcomponent title="分类" />
    <div class="container">
      <!-- 分类选择 -->
      <div class="classifySelect">
        <van-sidebar v-model="activeKey" class="app1">
          <div  v-for="(item,index) in categoryList" :key="index">
            <van-sidebar-item :title="item.name" />
          </div>
        </van-sidebar>
      </div>
      <!-- 右侧内容 -->
      <div class="classifySwiper">
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <div class="swiper-box">
              <img src="../images/1.jpg" alt="">
            </div>
          </van-swipe-item>
          <van-swipe-item>
             <div class="swiper-box">
              <img src="../images/2.jpg" alt="">
            </div>
          </van-swipe-item>
          <van-swipe-item>
             <div class="swiper-box">
              <img src="../images/3.jpg" alt="">
            </div>
          </van-swipe-item>
          <van-swipe-item>
             <div class="swiper-box">
              <img src="../images/4.jpg" alt="">
            </div>
          </van-swipe-item>
        </van-swipe>

        <!-- 内容 -->
        <div class="content">
          <GoodsList :goodsList="goodsList"></GoodsList>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MyNavcomponent from "../components/personal/MyNavcomponent";
import GoodsList from "../components/category/GoodsList";
import { getCategory, getGoodsList } from "../api/shop-api/shop-api";
export default {
  name: "Classify",
  data() {


    return {
      activeKey: 0,
      categoryList: [
        { categoryId: 1, name: "男装" },
        { categoryId: 2, name: "女装" }
      ],
      goodsList: []
    };
  },
  watch: {
    activeKey() {
      this.getGoodsList();
    }
  },
  components: {
    GoodsList,
    MyNavcomponent
  },
  created() {
    getCategory().then(res => {
      // 分类的列表
      // 把接口的分类列表放到data里 this.categoryList=请求到的分类的列表
      this.categoryList = res.rows;
      this.getGoodsList();
    });
  },
  methods: {
    getGoodsList() {
      // 根据当前激活分类获取分类的商品的列表
      getGoodsList(this.categoryList[this.activeKey].categoryId).then(res => {
        this.goodsList = res.rows;
      });
    }
  },
};
</script>
<style scoped>
.container{
  width: 100%;
  /* overflow-x: hidden; */
  display: flex;
}
.classifySelect{
  width: 90px;
}
.classifySwiper{
  /* 占用剩余宽度 */
  flex: 1;
  width: calc(100% - 90px);
}
.swiper-box{
  width: 100%;
  height: 150px;
}
.swiper-box img{
  width: 100%;
  height: 100%;
}
.content{
  width: 100%;
}
</style>